<html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <head>

  </head>
  <body>
    <div id="app-7">
      <ol>

        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
        <comp></comp>
      </ol>
    </div>
  </body>
  <script>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Vue.component('comp',{
    render(h) {
        return h('div',{
        style: {
            background: 'red',
        },
        on: {
            click: this.compClick
        }
        },'aaaaaaaaaaaaaaa')
    },
    methods: {
        compClick(e) {
            console.log(111111111111)
        }
    }
})


var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})


  </script>
</html>